<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>面部化妆品3级联动</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <select name="" id="sel1">
        <option value="">请选择</option>
    </select>
     <select name="" id="sel2">
        <option value="">请选择</option>
    </select>
     <select name="" id="sel3">
        <option value="">请选择</option>
    </select>
    <script>
    window.onload = function(){
        var sel1 = document.getElementById("sel1");
        var sel2 = document.getElementById("sel2");
        var sel3 = document.getElementById("sel3");
        var a = [{id:1,name:"护肤"},{id:2,name:"彩妆"},{id:3,name:"化妆工具"}];

        var b = [{id:4,name:"基础",parent:1},{id:5,name:"保养",parent:1},
                 {id:6,name:"底妆",parent:2},{id:7,name:"遮瑕",parent:2},
                 {id:8,name:"一次性",parent:3},{id:9,name:"长久性",parent:3}];

        var c = [{id:10,name:"化妆水",parent:4},{id:11,name:"乳液",parent:4},
                 {id:12,name:"眼霜",parent:5},{id:13,name:"精华液",parent:5},
                 {id:14,name:"隔离霜",parent:6},{id:15,name:"气垫霜",parent:6},
                 {id:16,name:"bb霜",parent:7},{id:17,name:"粉底液",parent:7},
                 {id:18,name:"棉签",parent:8},{id:19,name:"卸妆棉",parent:8},];
        
        var html = "<option value=\"请选择\">请选择</option>";
        for(var i = 0 ;i<a.length;i++){
            html += "<option value='"+a[i].id+"'>"+a[i].name+"</option>";
        }
        sel1.innerHTML = html;


        sel1.onchange = function(){
            var html = "<option value=\"请选择\">请选择</option>";
            var val = this.value;
            for(var i = 0;i<b.length;i++){
                if(b[i].parent == val){
                html += "<option value='"+b[i].id+"'>"+b[i].name+"</option>";
                }
            }
            sel2.innerHTML = html;
        }


        sel2.onchange = function(){
            var val = this.value
             var html = "<option value=\"请选择\">请选择</option>";
            for(var i = 0;i<c.length;i++){
                if(c[i].parent == val){
                    html += "<option value='"+c[i].id+"'>"+c[i].name+"</option>";
                }
            }
            sel3.innerHTML = html;
        }
    }


    </script>
</body>
</html>
